@extends('admin.common.base-master')

@section('html-head')
    {{--<link href="{{url('/vendor/tyupload/control/css/zyUpload.css')}}" type="text/css" rel="stylesheet" />--}}
    <link href="{{url('css/jquery.form.css')}}" type="text/css" rel="stylesheet" />
    {{--<script src="{{url('/vendor/My97DatePicker/WdatePicker.js')}}"></script>--}}
    <script src="{{url('/js/jquery.form.js')}}"></script>
    <style>
        .btn_add_classify{
            background: #31bcd3;margin-left:10px;height: 5px;width: 50px;color: white;text-align: center;padding:5px;border-radius:7px;box-shadow: 3px 2px 9px #888888;
        }
    </style>
@endsection

@section('html-body')
    <!-- content start -->
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
            <a href="#">商品管理</a>
            <em>></em>
            <a href="#">商品设置</a>
        </div>
        <!-- cur-position end -->

        <div class="gg-step">
            <form  id="advform">
                <input type="hidden" name="id" id="goods_id" value=""/>

                <div class="gg-list">
                    <label class="tit">商品名称</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入商品名称" name="name" id="name" value="@if($goods){{$goods->name}}@endif" /><cite id="title_re" class="required">*</cite>
                        <p class="text">可输入2-40个字符（一个汉字等于2个字符）</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">商品型号</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入商品名称" name="model" id="model" value="@if($goods){{$goods->model}}@endif" /><cite id="title_re" class="required">*</cite>
                        <p class="text">可输入2-40个字符（一个汉字等于2个字符）</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">付费方式</label>
                    <div class="cont">
                        <label class="gg-radio">
                            <select id="select_type">
                                <option value="0">请选择付费方式</option>
                                <option value="1" @if($goods && $goods->type == 1) selected @endif>波罗币兑换</option>
                                <option value="2" @if($goods && $goods->type == 2) selected @endif>微信支付</option>
                            </select>
                        </label>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">商品属性</label>
                    <label class="gg-radio">
                        <a href="javascript:;" class="btn_add_classify" id="btn_add_classify" onclick="upPop()">添加属性</a>
                    </label>
                    <label class="gg-radio" id="attr_val">
                        @if($goods && count($goods->goods_attrs) > 0)
                            @foreach($goods->goods_attrs as $attr)
                            <p>{{$attr->name}} <a href="javascript:void(0);" class="del-attr" data-val="{{$attr->name}}" style="color: #ef1414;">[删除]</a></p>
                            @endforeach
                        @endif
                    </label>
                </div>

                <div class="gg-list">
                    <label class="tit">付费金额</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入付费金额" name="" id="price" value="@if($goods && $goods->type == 2){{$goods->amount}} @elseif($goods && $goods->type == 1){{$goods->coin}} @endif" /><span id="pay_type">@if($goods && $goods->type == 2)元 @elseif($goods && $goods->type == 1)波罗币 @endif</span>
                        <p class="text">可输入2-40个字符（一个汉字等于2个字符）</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">商品库存</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" style="width: 160px;" placeholder="请输入库存" name="stock" id="stock" value="@if($goods){{$goods->stock}}@endif" /><cite id="teacher_re" class="required">*</cite>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">商品描述</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" style="width: 160px;" placeholder="请输入商品描述" name="info" id="info" value="@if($goods){{$goods->info}}@endif" /><cite id="teacher_re" class="required">*</cite>
                    </div>
                </div>

                <div class="gg-list" data-id="ggzst2">
                    <label class="tit">展示图</label>
                    <div class="demo" style="display: inline-block; padding: 0; margin: 0; *display: inline; *zoom:1;">
                        <input type = "hidden" name = "pic_img" id = "pic_img2" value = "" height="70px" >
                        <div id="showimg">
                        </div>
                        <div class="btn" style="background: #00A2D4">
                            <span id="inputImage">添加图片</span>
                            <input id="img_id" type="hidden" name="thumb_id" value="@if($goods){{$goods->thumb_id}}@endif">
                        </div>
                        <div class="progress">
                            <span class="bar"></span><span class="percent">0%</span >
                        </div>
                        <p class="text" id="uploadthumb">@if($goods && $goods->thumb_id != 0)<img style="width: 100px;padding-top: 3px;" src="{{route('Api.Image.Show',['id'=>$goods->thumb_id])}}" />@else 上传广告展示缩略图（图片格式为jpg或png）@endif</p>
                    </div>
                </div>
            </form>
            <div class="gg-list" >
                <label class="tit">&nbsp;</label>
                <div class="cont" >
                    <a href="javascript:;" class="next-step" id="nextid">提交</a>
                </div>
            </div>
        </div>
    </div>

    <div class="upPop-box">
        <div class="backdrop"></div>
        <div id="upPop" class="info-pop tixian">
            <a class="close" href="javascript:void(0);"></a>
            <h3>添加属性</h3>

            <div class="fill-list">
                <span class="fill-tit">分类名：</span>
                <input class="fill-ipt" type="text" name="add_classify" id="add_classify">
            </div>

            <input type="hidden" name="id">
            <div class="fill-list">
                <span class="fill-tit">&nbsp;</span>
                <input class="fill-submit" type="button" id="subThisForm" value="添加">
            </div>
        </div>
    </div>

    <script>
        function upPop() {
            $('.upPop-box').upPop();
        }

        $(function() {
            var attrArry = [];

            @if($goods && count($goods->goods_attrs) > 0)
                    @foreach($goods->goods_attrs as $attr)
                attrArry.push("{{$attr->name}}");
                @endforeach
            @endif

            <!-- 联动查询 -->
            var isSelect = 0;
            $('#select_type').change(function(){
                var value = $('#select_type option:selected').val();
                if(value == 1){
                    $('#pay_type').html('波罗币');
                    isSelect = 1;
                }else if(value == 2){
                    $('#pay_type').html('元');
                    isSelect = 2;
                }else{
                    isSelect = 0;
                }
            });



            $('#subThisForm').click(function () {
                var attrValue = $('#add_classify').val();
                attrArry.push(attrValue);

                var html = '<p>'+attrValue+' <a href="javascript:void(0);" class="del-attr" data-val="'+attrValue+'" style="color: #ef1414;">[删除]</a></p>';
                $('#attr_val').append(html);
                console.log(attrArry);
            });

            $(document).on('click','.del-attr',function(){
                var attrVal = $(this).data('val');
                attrArry.splice($.inArray(attrVal,attrArry),1);
                $(this).parent().hide();
                console.log(attrArry);
            });

            $('#nextid').click(function () {
                var name   = $('#name').val();
                var model  = $('#model').val();
                var price  = $('#price').val();
                var stock  = $('#stock').val();
                var info   = $('#info').val();
                var imgId  = $('#img_id').val();
                var goodId = $('#goods_id').val();

                $.ajax({
                    url:"{{route('Api.Admin.Good.addGoods')}}",
                    type:"post",
                    dataType:"json",
                    data:{
                        name:name,
                        model:model,
                        price:price,
                        stock:stock,
                        info:info,
                        thumb_id:imgId,
                        id:goodId,
                        type:isSelect,
                        attr:attrArry
                    },
                    success:function(obj){
                        if(obj.level == "success"){
                            noty({text:obj.message,type:obj.level,timeout:600,
                                callback:{
                                    afterClose:function(){
                                        window.location.href = "{{route('Admin.Page.goodsList')}}";
                                    }
                                }
                            });
                        }else if(obj.level == "error"){
                            noty({text:obj.message,type:obj.level,timeout:600});
                        }

                    },
                    error:function(obj){
                        console.log(obj);
                    }
                });
            });

            //缩略图上传代码
            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'inputImage',
                url: '{{route("Api.Upload.Image")}}',

                chunk_size: '20mb',
                filters: {
                    max_file_size: '20mb',
                    mime_types: [
                        {title: "Image files", extensions: "jpg,gif,png"}
                    ],
                    prevent_duplicates: false
                },
                multi_selection: true,
                unique_names: true,

                flash_swf_url: '{{ url('vendor/plupload-2.1.2/Moxie.swf') }}',
                silverlight_xap_url: '{{ url('vendor/plupload-2.1.2/Moxie.xap') }}',

                file_data_name: 'photo',
                headers: {
                    Accept: 'application/json'
                },

                multipart_params: {
                },

                init: {
                    PostInit: function () {
                    },

                    FilesAdded: function (up, files) {
                        up.start();
                    },

                    BeforeUpload: function (up, file) {
                        up.settings.multipart_params.file_name = file.name;
                    },

                    UploadProgress: function (up, file) {

                    },

                    Error: function (up, err) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(err.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }

                        noty({
                            type: 'error',
                            text: err.message + ' ' + responseMessage,
                            timeout: 800
                        });
                    },

                    FileUploaded: function (up, file, info) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(info.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }
                        if(responseObj.level == "success"){
                            $('#img_id').val(responseObj.data.id);
                            $('#uploadthumb').html('<span style="color: green">上传成功</span>,' + responseObj.data.img_name);
                        }else{
                            noty({type:responseObj.level,text:responseObj.message,timeout:800});
                            $('#uploadthumb').html('<span style="color: red">上传失败，请重新上传！</span>');
                        }

                    }
                }
            });
            uploader.init();
        });
    </script>
@endsection